@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';

.treeLine {
  pointer-events: none;

  position: relative;

  flex-shrink: 0;

  width: $size-tree-item-line-width;

  visibility: hidden;

  &[data-visible] {
    visibility: visible;

    &::after {
      content: '';

      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);

      width: 1px;
      height: calc(100% - ($size-tree-item-height / 2));

      background: $sys-neutral-decor-default;
    }
  }

  &[data-half-height] {
    &::after {
      height: calc(100% - ($size-tree-item-height / 2));
    }
  }

  &[data-horizontal] {
    &::after {
      top: 50%;
      left: -50%;
      transform: translateY(-50%);

      width: calc(150% - $space-tree-item-child-line-padding);
      height: 1px;
    }

    &[data-half-width] {
      width: 0;

      &::after {
        left: calc(0px - $size-tree-item-line-width / 2);
        width: calc($size-tree-item-line-width / 2);
      }
    }
  }
}
